<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button v-auth="Permission.ADD" type="primary" @click="handleCreate">
          新增
        </a-button>
        <a-button
          v-auth="Permission.DEL"
          type="primary"
          v-show="rowSelected"
          @click="handleBatchDelete"
        >
          删除
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
        <template v-else-if="column.key === 'avatar'">
          <Avatar v-if="record.avatar" :src="record.avatar" />
        </template>
      </template>
    </BasicTable>
    <AuthorModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { Avatar } from "ant-design-vue";
import { ref } from "vue";
import { Permission, columns, searchFormSchema } from "./index-option";
import AuthorModal from "./modal.vue";
import { delAuthorApi, getAuthorPageApi } from "/@/api/microresource/author";
import { useModal } from "/@/components/Modal";
import {
  ActionItem,
  BasicTable,
  EditRecordRow,
  TableAction,
  useTable,
} from "/@/components/Table";
import { useMessage } from "/@/hooks/web/useMessage";

const rowSelected = ref(false);
const [registerTable, { reload, getSelectRowKeys }] = useTable({
  title: "作者列表",
  api: getAuthorPageApi,
  rowKey: "authorId",
  columns,
  formConfig: {
    labelWidth: 80,
    schemas: searchFormSchema,
  },
  striped: false,
  useSearchForm: true,
  bordered: true,
  ellipsis: true,
  rowSelection: {
    type: "checkbox",
    onChange: (selectedRowKeys) => {
      rowSelected.value = selectedRowKeys.length > 0;
    },
  },
  actionColumn: {
    width: 150,
    title: "操作",
    dataIndex: "action",
    fixed: undefined,
  },
});

const [registerModal, { openModal: openModal }] = useModal();

const { createMessage, createConfirm } = useMessage();

function handleCreate() {
  openModal(true, { isUpdate: false });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
  });
}

function handleDelete(authorIds: string[]) {
  delAuthorApi(authorIds).then((res) => {
    createMessage.success(res.msg);
    handleSuccess();
  });
}

function handleBatchDelete() {
  createConfirm({
    iconType: "warning",
    title: "确认提示",
    content: "请确认是否删除选中的作者？",
    onOk: () => {
      handleDelete(getSelectRowKeys());
    },
  });
}

function handleSuccess() {
  reload();
}

function createActions(record: EditRecordRow): ActionItem[] {
  return [
    {
      icon: "clarity:note-edit-line",
      label: "编辑",
      auth: Permission.EDIT,
      onClick: handleEdit.bind(null, record),
    },
    {
      icon: "ant-design:delete-outlined",
      label: "删除",
      auth: Permission.DEL,
      color: "error",
      popConfirm: {
        title: "是否删除作者？",
        confirm: handleDelete.bind(null, [record.authorId]),
      },
    },
  ];
}
</script>
